<template>
  <!-- 好书推荐 -->
  <div class="hot-book">
    <div class="box2">
      <div class="all-title">
        热推分类好书
        <div class="vip" style="color: #333" @click="change">换一换</div>
      </div>

      <div class="book-item">
        <router-link
          tag="div"
          class="item"
          v-for="(item, index) in datacontent"
          :key="index"
          :to="'/noveldetail?id=' + item.id"
        >
          <div class="item-img">
            <img :src="item.fictionImg" alt="" />
          </div>
          <span class="item-title">{{ item.titleName }}</span>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { getFictionApi } from "../api/novelmain.js";
export default {
  data() {
    return {
      // typelist: null,
      datacontent: [], // 用来存放每次点击换一批出来的三张图片
      num2: "", // 用来放三个随机数
      arr: [], // 用来放三个随机数的数组，用来循环
    };
  },
  methods: {
    //每次点击换一批触发这个方法
    change() {
      this.num2 = "";
      this.arr = [];
      this.datacontent = []; // 每次点击换一批就让之前的数据全清空
      while (this.arr.length < 3) {
        // 用while来判断是否循环三次
        let num = parseInt(Math.random() * 10); // 随机出三个0-9之间的随机数
        if (this.arr.indexOf(num) == -1) {
          // 获得不重复的三个数
          this.arr.push(num);
          this.num2 = num;
          this.datacontent.push(this.fiction[this.num2]); // 将随机数当作下标来便利data里的内容
        }
      }
    },
  },
  mounted() {
    getFictionApi().then((data) => {
      this.fiction = data.fiction;

      // 页面一加载的时候先出来三个对象的内容
      for (var i = 0; i < this.fiction.length; i++) {
        if (i < 3) {
          this.datacontent.push(this.fiction[i]);
        }
      }
    });
  },
};
</script>

<style lang="scss" scoped>
</style>